<template>
	<view>
		<!-- <view class="">{{countdown_time}}</view> -->
		<view class="flex align date-box" :style="{color: background,fontSize: fontSize+'rpx'}">
			<view class="date-box-item" :style="{background: background,color: fontColor,lineHeight:lineHeight+'rpx',width:lineHeight+'rpx'}">{{h}}</view>
			<view :style="{marginLeft: margin+'rpx',marginRight: margin+'rpx'}">:</view>
			<view class="date-box-item" :style="{background: background,color: fontColor,lineHeight:lineHeight+'rpx',width:lineHeight+'rpx'}">{{m}}</view>
			<view :style="{marginLeft: margin+'rpx',marginRight: margin+'rpx'}">:</view>
			<view class="date-box-item" :style="{background: background,color: fontColor,lineHeight:lineHeight+'rpx',width:lineHeight+'rpx'}">{{s}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"countdown",
		props: {
			downTime: {
				type: String,
				default: '2022-12-18 18:00:00'
			},
			fontSize: {
				type: String||Number,
				default: '24'
			},
			background: {
				type: String,
				default: '#FF6200'
			},
			fontColor: {
				type: String,
				default: '#FFFFFF'
			},
			lineHeight: {
				type: String||Number,
				default: '36'
			},
			margin: {
				type: String||Number,
				default: '16'
			}
		},
		data() {
			return {
				countdown_time: '00:00:00',
				h: '00',
				m: '00',
				s: '00'
			}
		},
		mounted(){
			// this.countTime()
		},
		watch:{
			downTime(){
				console.log(this.downTime,"(((())))")
				this.countTime()
			},
		},
		created(){
			
		},
		methods: {
			countTime() {
				//获取当前时间  
				var date = new Date();
				var now = date.getTime();
				//设置截止时间
				// str = "2021/1/9 16:59:00";
				// console.log(this.downTime,"截止时间")
				var str = this.downTime
				var endDate = new Date(str);
				var end = endDate.getTime();
				//时间差  
				var leftTime = end - now;
				if (leftTime <= 0) {
					this.countdown_time = "已结束"
					return
				}
				//定义变量 d,h,m,s保存倒计时的时间  
				var d, h, m, s;
				if (leftTime >= 0) {
					  // d = Math.floor(leftTime/1000/60/60/24); 
					h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
					m = Math.floor(leftTime / 1000 / 60 % 60);
					s = Math.floor(leftTime / 1000 % 60);
				}
				//将倒计时赋值到view中  
				h=h>=10?h:'0'+h;
				m=m>=10?m:'0'+m;
				s=s>=10?s:'0'+s;
				this.h = h;
				this.m = m;
				this.s = s;
				this.countdown_time = `${h}:${m}:${s}`;
				//递归每秒调用countTime方法，显示动态时间效果  
				var timers = setTimeout(this.countTime, 1000);
			},
		},
	}
</script>

<style lang="scss">
	.date-box {
		color: #FF6200;
		.date-box-item {
			width: 36rpx;
			font-size: 24rpx;
			text-align: center;
			line-height: 36rpx;
			border-radius: 3rpx;
			background-color: #FF6200;
			color: #FFFFFF;
		}
	}
</style>